約 4,478,990 件
https://w.atwiki.jp/suffix/pages/182.html
JavaScriptリファレンス CSS編 Javascript駄文(とりあえず、ただ並べただけ) Javascript基本 フォーム編 イベント編 ウィンドウ編 javascript文字列操作 javascriptファイル入出力 FirefoxのGreasemonkeyとかを利用して何かやるのも面白そうですよね。 ということで初めてみました。 Greasemonkey編
https://w.atwiki.jp/comcatet/pages/29.html
Dateオブジェクト XMLHttpRequest プロトタイプチェーンとクラス ループ処理 内包表記 ES5setter - JavaScript | MDN getter - JavaScript | MDN ES6の実験機能アロー関数Arrow functions - JavaScript | MDN Firefox 22(Nightly) で ArrowFunction が実装されたが、扱いが難しい - hogehoge @teramako 自身のthisを持たない 自身のargumentsを持たない(fx43から) デフォルトパラメーターDefault parameters - JavaScript | MDN ES.next のデフォルトパラメータが Firefox Nightly で実装された - hogehoge @teramako Rest parameterRest parameters - JavaScript | MDN ES.next の FunctionRestParameter が Firefox Nightly で実装された - hogehoge @teramako Spread operatorSpread operator - JavaScript | MDN Method definitionMethod definitions - JavaScript | MDN function*function* - JavaScript | MDN クラスClasses - JavaScript | MDN JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう | HTML5Experts.jp 分割代入Destructuring assignment - JavaScript | MDN JavaScript の分割代入まとめ - mooz deceives you
https://w.atwiki.jp/sevenlives/pages/234.html
JavaScript【ジャバスクリプト】 読み：じゃばすくりぷと 英語：JavaScript 意味： Netscape Communicationsが開発したスクリプト言語?。 プロトタイプオブジェクト指向であり主な用途はwebブラウザ(クライアント側)で働く言語。 これによりクライアント側での動きのある柔軟なページが可能となった。 クライアント側で作用するためブラウザさえあれば簡単に動かせる。 当初はLiveScriptと呼ばれていたが当時話題のJava言語の名をつけ、JavaScriptと変更してしまった。Javaとは別の言語。 JavaScriptもオブジェクト指向であるがJavaやC++などのクラスベースのオブジェクト指向ではないためオブジェクト指向を使いこなすにはJavaScript用のプロトタイプベース・オブジェクト指向の理解が必要。実体はハッシュのようにシンプルでプロトタイプ・チェーンなど理解すれば、非常に柔軟な使い方ができます。 ブラウザやバージョンによって実装が微妙に違うためまた、最近の言語に多いエラー表示機能はないのでバグ処理が困難でした。しかしFirefoxのアドオンであるFirebugなどが開発されかなりその環境も大きく改善されています。 容易に書けるためセキュリティホールなどが発生しやすく、１度廃れてしまった経緯がある。 しかしGoogleによってJavaScriptを大いに活用したAjaxという使い方でフレキシブルなページが注目を浴び、一躍注目の言語に復活しました。 時代の変化やWebブラウザの独自機能などのため仕様がどんどん拡張、変更しており DOM、XMLHttpRequestからjQueryなどのライブラリの活用までトレンド変化の激しい言語だとも言えます。 2019年03月07日 ECMAScriptECMAScript 3? ECMAScript 4? ECMAScript 5? ECMAScript 6 ECMAScript 2016? ECMAScript 2017? JScript CoffieScript? Dart? JSS? ダイナミック言語? altJS Toy language? サンドボックス 同一出身ポリシー Dynamic HTML【DHTML】バリアントタイプ【variant type】 イベント・ハンドラ イベント・リスナ(JavaScript) ブックマークレット ロールオーバー ウィジェット ビヘイビア ActionScript? サーバーサイドJavaScript ユーザー・エージェント? クライアント・スニファ? HTA LiveConnect? 関数(JavaScript) スコープ(JavaScript)グローバル変数(JavaScript)? ローカル変数(JavaScript) グローバル・コード リテラル(JavaScript)?関数リテラル 配列リテラル オブジェクト・リテラル strictモード JsTestDriver? JavaScriptシェル? Signed Scripts? JSDoc? JsDoc Toolkit 控えめなJavaScript ■ プロトタイプベース・オブジェクト指向? プロパティ(JavaScript) メソッド(JavaScript)? オブジェクト(JavaScript)? コンストラクタ(JavaScript) for in 構文 プロトタイプ(JavaScript) オブジェクト・リテラル ラッパー・オブジェクト(JavaScript)? レキシカルスコープ スコープ・チェーン コンストラクタ・チェーン? ハッシュ? 匿名関数 高階関数 クロージャ(JavaScript) 変数オブジェクト? 関数オブジェクト 匿名オブジェクト? プロトタイプ・オブジェクト? ビルトイン・オブジェクト グローバル・オブジェクト ホストオ・ブジェクト? プロトタイプ・チェーン? 実行コンテキスト(JavaScript) Activation Object 暗黙の参照? ガーベージ・コレクション JSON DOM(JavaScript) 属性?DontEnum ReadOnly? DontDelete Internal? ■ 型 数値型(Number) 文字列型(String)? 論理型(Boolean)? オブジェクト型(Object)? 配列型(Array)? var? null undefine NaN Infinity? ■ スクリプト・エンジン(JavaScript)? SpiderMonkey ActionMonkey? TraceMonkey JaegerMonkey V8 Carakan? Futhark? Tamarin Rhino JavaScriptCore Chakra? ■ JavaScriptライブラリ prototype.js YUI Library jQuery JSAN? ■ JavaScriptフレームワーク GWT? Adobe Spry? Dojo Toolkit? Ext JS? AngularJS? Backbone.js React.js? Knockout.js? Ember.js? イベントドリブン イベントバブルアップ? XMLHttpRequest ■ クロスブラウザ Internet Explorerキオスクモード? Firefox Unobtrusive Scripting
https://w.atwiki.jp/cz8686/pages/13.html
[JavaScript] 数値チェック function CheckNum(value) { var str = value; if ( isNaN(str) == true ){ return false; } return true; } ▼使用例 ※数値でない場合(falseを返す場合)、フラグを立てる。 if ( CheckNum(form_value) == false) { numFlg = 1; } [JavaScript] DHTMLによる表示・非表示 script language="JavaScript" !-- function show(id) { if (document.all) { document.all.item(id).style.visibility = "visible"; } else if (document.layers) { document.layers[id].visibility = "show"; } else if (document.getElementById) { document.getElementById(id).style.visibility = "visible"; } } function hide(id) { if (document.all) { document.all.item(id).style.visibility = "hidden"; } else if (document.layers) { document.layers[id].visibility = "hide"; } else if (document.getElementById) { document.getElementById(id).style.visibility = "hidden"; } } // -- /script a href="wwwssi.htm" onmouseover="show( id1 )" onmouseout="hide( id1 )" SSI入門 /a span id=id1 style="visibility hidden" ilayer name=id1 visibility="hide" - 「とほほのSSI入門」にジャンプします。 /ilayer /span br a href="wwwcgi.htm" onmouseover="show( id2 )" onmouseout="hide( id2 )" CGI入門 /a span id=id2 style="visibility hidden" ilayer name=id2 visibility="hide" - 「とほほのCGI入門」にジャンプします。 /ilayer /span [JavaScript] DHTMLサンプル HTML HEAD Script Language="JavaScript" Type="text/javascript" !-- function test1(){ // 色の変更 document.all("T1").style.color="red"; // フォーム背景色の変更 document.all("T2").style.backgroundColor="red"; // inntertext の変更 document.all("T3").innerText = "kakikukuko"; // innerHTML の変更 document.all("T4").innerHTML = " TEXTAREA fadsfdaf br dfafdaf /TEXTAREA " } // -- /Script /HEAD BODY FORM NAME="f1" INPUT TYPE="TEXT" NAME="TEST1" VALUE="AAAAA" ID="T1" INPUT TYPE="TEXT" NAME="TEST2" VALUE="あいうえお" ID="T2" BR DIV ID="T3" かきくけこ /DIV BR DIV ID="T4" abcdefg /DIV INPUT TYPE="BUTTON" VALUE="テスト" onClick="javascript test1();" /FORM /BODY /HTML [JavaScript] ブラウザの戻るボタンを無効にする （戻りたくない画面に） SCRIPT history.forward(); /SCRIPT を記述しておく [JavaScript] 右クリック禁止１ Script Language="JavaScript" Type="text/javascript" !-- function notes(eve){ if(document.all){ /*IEの場合*/ if(event.button == 2){ alert("右クリック禁止！"); return false; } } if(document.layers){ /*Netscape4.Xの場合*/ if(eve.which == 3){ alert("右クリック禁止！!"); return false; } } } if(document.layers)document.captureEvents(Event.MOUSEDOWN); document.onmousedown=notes; // -- /Script [JavaScript] 右クリック禁止２ BODY oncontextmenu="alert( 右クリックは禁止です。 );return false;" BGCOLOR="#C0C0C0" TEXT="#000000" ALINK="RED" VLINK="BLUE" [JavaScript] 新規Windowオープン(GET引数) function new_window_open2 (a,b,c,d,e,f){ if (f==""){f="no";} var w = window; if ((w == window) || win_00.closed) { w = open("",b,"width="+c+",height="+d+",toolbar=no,menubar="+f+",location=no,scrollbars="+e+",status=yes,resizable=yes"); w.document.write(" marquee "); w.document.write(" span style= font bold;color #ff0000;font-size 10pt; "); w.document.write("ただいま処理しております。 br しばらくお待ちください。"); w.document.write(" /span "); w.document.write(" /marquee "); w.location.replace(a); } else { w.location.replace(a); } w.focus(); return(w); } ▼使用例 Script Language="JavaScript" Type="text/javascript" !-- function PAGE_TEST1(){ var w_url="PAGE_TEST1I"+ "?W_FORM_NAME1=form1.W_KYU_KUNITOSHI_CD"+ " W_FORM_NAME2=form1.W_KYU_KUNI_MEI"+ " W_FORM_NAME3=form1.W_KYU_TOSHI_MEI"+ ""; } // -- /Script [JavaScript] 全角文字チェック function CheckZenkaku(str){ str2 = str.replace(/[ ]/g,""); for (var i = 0; i str2.length; i++) { var c = str2.charCodeAt(i); // Shift_JIS 0x0 ～ 0x80, 0xa0 , 0xa1 ～ 0xdf , 0xfd ～ 0xff // Unicode 0x0 ～ 0x80, 0xf8f0, 0xff61 ～ 0xff9f, 0xf8f1 ～ 0xf8f3 if ( (c = 0x0 c 0x81) || (c == 0xf8f0) || (c = 0xff61 c 0xffa0) || (c = 0xf8f1 c 0xf8f4)) { return false; } } return true; } ▼使用例 if (CheckZenkaku(form_value) == false) { message = message + "氏名に全角以外の文字が含まれています\nすべて全角文字で入力してください"; alert(message); return false; } [JavaScript] 送信ボタン連打防止 ●ボタン連打を防ぐ ///////////////////////////////////////////////////////// ■使用方法 ：以下の文をカットアンドペーストして使う ■説明 ：サブミット時のボタン連打を防ぐ ///////////////////////////////////////////////////////// SCRIPT LANGUAGE="JavaScript" !-- sent = false; function send_check(){ if(sent){ return false; }else{ sent = true; return true; } } // -- /SCRIPT ●別例 二重投稿禁止 form onsubmit="for (i=0;i this.length;i++) {if (this[i].type == submit ) this[i].disabled = true}" フォームのボタンは、たまにですが過敏に反応しすぎて二度押したように判断する時があります。 例えば掲示板なら、同じ記事を即時に二回送信してしまうわけです。 このパターンの二重投稿はJavaScriptで回避できるのでした。 [JavaScript] 日付(YYYYMMDD)妥当性チェック関数 ※ myGetYearとセットで使用 function CheckDate(value) { var flg; var year; var month; var date; flg = value.match(/(\d{8})/); if ( !flg ) { return false; }else{ year = value.substring(0,4); month = value.substring(4,6); date = value.substring(6,8); newdate = new Date(year,month-1,date) if ( myGetYear(newdate) != year || (newdate.getDate() != date) || (month != newdate.getMonth()+1)) { return false; } return true; } } function myGetYear(dobj) { var year ; year = dobj.getYear() ; if (year 1900) { year += 1900; } return year; } [JavaScript] 履歴を残さずに画面遷移 HTML HEAD TITLE /TITLE SCRIPT language="JavaScript" !-- function pageReplace(){ window.location.replace("history9.htm"); } // -- /SCRIPT /HEAD BODY CENTER A href="javascript pageReplace()" 指定したページへ移動 /A BR BR FORM INPUT type="button" value="指定したページへ移動" onClick="pageReplace()" /FORM /CENTER /BODY /HTML [javascript] WindowOpen用の共通関数 function new_window_open2 (a,b,c,d,e,f){ if (f==""){f="no";} var w = window; if ((w == window) || win_00.closed) { w = open("",b,"width="+c+",height="+d+",toolbar=no,menubar="+f+",location=no,scrollbars="+e+",status=yes,resizable=yes"); w.document.write(" marquee "); w.document.write(" span style= font bold;color #ff0000;font-size 10pt; "); w.document.write("ただいま処理しております。 br しばらくお待ちください。"); w.document.write(" /span "); w.document.write(" /marquee "); // w.location.href=a; w.location.replace(a); } else { // w.location.href=a; w.location.replace(a); } w.focus(); return(w); }
https://w.atwiki.jp/hear_br0wn/pages/26.html
Javascript基礎①(概要) Javascript基礎②(関数と変数) Javascript基礎③(四則演算) Javascript基礎④(配列とインクリメント・デクリメント) Javascript基礎⑤(関数と引数) Javascript基礎⑥(for構文) Javascript基礎⑦(if構文（条件分岐）)
https://w.atwiki.jp/kobapan/pages/110.html
JavaScript/【気象庁】過去の気象（今月） JavaScript/空オブジェクト・空配列の判定 JavaScript/GoogleCalenderをフルスクリーンで開くブックマークレット JavaScript/URLからファイル名を取得する JavaScript/1秒後に実行する JavaScript/Grunt bake - Simple static html partials includes JavaScript/jquery.lazyload - 画像を遅延ロード
https://w.atwiki.jp/t07540kn/pages/13.html
Javascript学びメモ javascriptの記述方法 1. script type="text/javascript" /script 2. script src="uri" type="text/javascript" /script 3. イベントハンドラ上で利用 ➡ onclick="arelt()"とか？ ※ヘッダ内に meta http-equiv="Content-script-type" content="text/javascript" を記述してイベントハンドラでjavascriptを使うことを知らせる必要あり 4. a要素で記述 5. noscript /noscript でサポート外のプラウザ用メッセージを記述できる
https://w.atwiki.jp/aias-jsstyleguide2/pages/13.html
JavaScriptの言語仕様に関するルール 各項目の左側にある三角ボタンで、詳細情報の表示・非表示を切り替えられます。また下のボタンを使うと全項目を一度に変更することができます。 全て切り替える var 常に、varと共に変数を宣言します。 varの指定がない場合、変数はグローバルコンテキストに置かれ、既存の値を上書きする可能性があります。またもし宣言そのものがなければ、その変数のスコープがどこにあるのか分かりにくくなります（その変数はローカルスコープと同じように、DocumentやWindowの中に存在していてもよいのです）。従って常にvarと共に変数を宣言してください。 定数 定数値にはNAMES_LIKE_THISのような名前をつけます。 変数やプロパティの参照先が固定されている（上書きできない）ことを示すには、@constを使います。 Internet Explorerがサポートしないconst キーワードは決して使いません。 定数値 ある値を一定で変化しないものとして扱いたい場合、名前をCONSTANT_VALUE_CASE.ALL_CAPSのように全て大文字にし、さらに@constによって上書きできないことを示してください。 プリミティブ型（number、string、boolean）はもともと定数値です。 オブジェクトの不変性の判断は、より主観的です － 観察可能な状態変化が起きていない場合のみ、オブジェクトは不変とみなされるべきです。ただしCompilerはこの考え方を強制しません。 （変数・プロパティへの）定数ポインタ 変数やプロパティに付けられた@constアノテーションは、それらを上書きできないことを表します。この規則はCompilerによるビルド時に強制されます。またこの動作はconst キーワードとも矛盾しません。（Internet Explorerがサポートしないため、constキーワードは使いませんが。） メソッドに付けられた@constアノテーションは、サブクラスがそのメソッドをオーバーライドできないことを表します。 コンストラクタに付けられた@constアノテーションは、そのクラスをサブクラス化できないことを表します。（Javaにおける@finalと同じです） 例 @constは、（CONSTANT_VALUES_CASE形式の名前のように）変数の値そのものが一定であることを必ずしも意味しません。一方CONSTANT_VALUES_CASE形式の名前は@constの示す内容を内包しています。 /** * ミリ秒単位のリクエストタイムアウト時間 * @type {number} */ goog.example.TIMEOUT_IN_MILLISECONDS = 60; 大文字だけの名前は@constの内容を含むため、この秒数は定数です。値の上書きはできません。 オープンソースのコンパイラは@constがついていないシンボルの上書きを許容すると思われます。 /** * 文字列を返すURLのマップ * @const */ MyClass.fetchedUrlCache_ = new goog.structs.Map(); /** * サブクラス化できないクラス * @const * @constructor */ sloth.MyFinalClass = function() {}; このケースではプロパティ値であるオブジェクトは上書きされませんが、オブジェクトの値は頻繁に変化し一定ではありません。（このため名前には大文字ではなくキャメルケースが使われています） セミコロン 常にセミコロンを使います。 暗黙的なセミコロンの挿入に依存することは、微妙な、デバッグしにくい問題を引き起こします。もっと良い方法を選びましょう。 次のコードのセミコロンの無い箇所は、その危険性を示す典型的な例です // 1. MyClass.prototype.myMethod = function() { return 42; } // ここにはセミコロンがありません。 (function() { // ローカルスコープを生成する関数の中に書かれた初期化処理。 })(); var x = { i 1, j 2 } // ここにはセミコロンがありません。 // 2. Internet ExplorerかFirefoxかによって処理を振り分けます。 // こんなコードは書かないとは思いますが、とりあえずお許しを。 [ffVersion, ieVersion][isIE](); var THINGS_TO_EAT = [apples, oysters, sprayOnCheese] // ここにはセミコロンがありません。 // 3. bash風の条件分岐。 -1 == resultOfOperation() || die(); 何が起きるか？ JavaScriptエラー － 先ず、42を返す関数が2番目の関数を引数として実行されます。次に42が "コール" され、数字なのでエラーが発生します。 x[ffVersion, ieVersion][isIE]()を実行しようとしたランタイムから、おそらく undefined にはそのようなプロパティはありません という風なエラーが返されます。 配列マイナス1はNaNとなり、NaNはどんな値とも一致しないため必ずdie()が呼び出されます（たとえresultOfOperation()の戻り値がNaNだったとしても）。THINGS_TO_EATにはdie()の戻り値が代入されます。 なぜ？ その存在が安全に推測される場合を除き、JavaScriptは文（statement）の末尾にセミコロンを要求します。上の各例では、関数宣言、オブジェクト、配列リテラルは１つの文の内側にいると見なされています。閉じ括弧は文の終了を表すには不十分です。JavaScriptは中置演算子（＋、－など）や括弧では決して文を終了させません。 このことは本当に人々を驚かせます。従って文の末尾は確実にセミコロンで終わらせるべきです。 セミコロンと関数について 関数式の後ろにはセミコロンを付けますが、関数宣言の後ろには付けません。その違いを示す非常に分かりやすい例がこれです var foo = function() { return true; }; // ここにはセミコロンを付けます function foo() { return true; } // ここにはセミコロンを付けません ネストされた関数 使えます。 ネストされた関数は、例えば継続（continuation）の生成やヘルパー関数の隠蔽を行う際に、とても役立ちます。遠慮なく使いましょう。 ブロック内での関数宣言 使わないでください。 次のように書いてはいけません if (x) { function foo() {} } ほとんどのスクリプトエンジンはブロック内での関数宣言をサポートしていますが、それはECMAScript（ECMA-262,13及び14項を参照）の仕様には含まれていません。各エンジンの実装は、互いの間でも将来のECMAScriptに対しても、一貫性が保証されていません。ECMAScriptは関数の宣言をスクリプトのトップレベルか関数内のスコープでのみ許しています。代わりに変数へ関数を代入すれば、ブロック内でも関数を定義することが可能です if (x) { var foo = function() {}; } 例外 使えます。 もし自明でない何かを行うのであれば（アプリケーション開発フレームワークの利用など）、基本的に例外は避けられません。使いましょう。 独自の例外 使えます。 独自の例外を使わない場合、何かの値を返す関数が更にエラー情報も返そうとすると、その方法はトリッキーかつエレガントでないものになりそうです。戻り値をエラー情報への参照にするか、あるいはエラー情報をメンバに持つオブジェクトに変えることになるでしょう。これらは本質的に、原始的な例外ハンドリングのハックと言えます。必要であればどんどん独自の例外を使ってください。 標準機能 標準機能は非標準の機能よりも常に優先されます。 移植性と互換性を最大化するため、常に標準化された機能の方を選択してください。（例えばstring[3]ではなく string.charAt(3)を、DOM要素へのアクセスには特定のアプリケーションが提供する簡略化された機能ではなく、DOMの標準機能を使います） プリミティブ型のラッパーオブジェクト 使わないでください。 プリミティブ型のラッパーオブジェクトは使う理由がないだけでなく、危険ですらあります var x = new Boolean(false); if (x) { alert( hi ); // hi と表示されます。 } このようにしてはいけません！ ただし、型のキャストに使うのは全く問題ありません var x = Boolean(0); if (x) { alert( hi ); // これは決してアラートされません。 } typeof Boolean(0) == boolean ; typeof new Boolean(0) == object ; これは何らかのデータを数値、文字列、論理値に変換するにはとても良い方法です。 多段階のプロトタイプ階層 好ましくありません。 多段階のプロトタイプ階層はJavaScriptが実装する継承手法です。ユーザ定義クラス D のプロトタイプを別のユーザ定義クラス B にすると多段階の階層構造が作れます。しかしこれらの階層構造を正しく把握しておくのは、最初の状態と比べるとかなり難しいことです。 このため、継承にはClosure Libraryのgoog.inherits()のようなライブラリ関数を使うのが最善です。 function D() { goog.base(this) } goog.inherits(D, B); D.prototype.method = function() { ... }; メソッドとプロパティの定義 /** @constructor */ function SomeConstructor() { this.someProperty = 1; } Foo.prototype.someMethod = function() { ... }; "new"によって生成されるオブジェクトにメソッドやプロパティを付け加えるにはいくつかの方法がありますが、メソッドではこのスタイルが推奨されます Foo.prototype.bar = function() { /* ... */ }; その他のプロパティでは、コンストラクタの中で初期化を行うスタイルが推奨されます /** @constructor */ function Foo() { this.bar = value; } なぜ？ 現在のJavaScriptエンジンは、オブジェクトをその「形状」に基いて最適化します。プロパティの追加（プロトタイプに設定された値のオーバーライドも含まれます）はオブジェクトの形状を変化させ、パフォーマンスの低下をもたらします。 delete より好ましいのは this.foo = null の方です。 Foo.prototype.dispose = function() { delete this.property_; }; ではなく、こう書きましょう Foo.prototype.dispose = function() { this.property_ = null; }; 現代のJavaScriptエンジンにおいて、プロパティの数を増減させる処理は、値の再割り当てに比べはるかに低速です。次の場合を除き、deleteキーワードは避けるべきです。 プロパティ名をキーとする反復処理を行なっており、そのキーを削除する必要があるとき if (key in obj)の結果を変更する必要があるとき クロージャ 使えます、しかし慎重に。 クロージャを作成できる能力は、おそらく最も役に立つ、しかししばしば見落とされているJSの特長です。クロージャの動作についての良い解説はこちらをご覧ください。 しかし1つ覚えておいて欲しいのは、クロージャは自身を取り囲むスコープへのポインタを保持しているという点です。このためクロージャをDOM要素ヘ結びつけると、循環参照が発生しメモリリークとなることがあります。例えば次のコードです function foo(element, a, b) { element.onclick = function() { /* a と b を使う */ }; } クロージャ関数は element、a、bへの参照を持っています。elementを使わないとしてもです。elementもまたクロージャへの参照を保持しており、そこでガーベジコレクションが回収できない循環ができてしまっています。この状況では、コードは次のように構成されるべきです function foo(element, a, b) { element.onclick = bar(a, b); } function bar(a, b) { return function() { /* a と b を使う */ }; } eval() コードローダまたはREPL(Read-eval-print loop)にのみ使います。 eval()はセマンティクスに混乱を引き起こします。またユーザの入力を含む文字列をeval()することは危険な行為です。たいていはもっと適切、明確、安全なコードの書き方が存在するため、通常その利用は許容されません。 JSONを用いたRPCの際、データの解釈にはeval()の代わりにJSON.parse()を使います。 以下のような結果を返すサーバがあるとします { "name" "Alice", "id" 31502, "email" "looking_glass@example.com" } var userInfo = eval(feed); var email = userInfo[ email ]; 配信データが悪意あるJavaScriptコードを含むものに改変されていたとして、eval()を使っていたらコードはそのまま実行されてしまうでしょう。 var userInfo = JSON.parse(feed); var email = userInfo[ email ]; JSON.parse()を使うと、（全ての実行可能なJavaScriptを含む）不正なJSONに対して例外が発生します。 with() {} 使わないでください。 withの使用はプログラムのセマンティクスを曇らせます。withで指定されたオブジェクトはローカル変数と衝突するようなプロパティを持てるため、プログラムの意図が大きく変えられてしまうおそれがあります。例えばこのコードでは何が起きるでしょうか？ with (foo) { var x = 3; return x; } 答えは「あらゆることが起きる」です。ローカル変数xはfooのプロパティに乗っ取られます。もしxがsetterだった場合、3の代入は他の多くのコードを実行させる原因となりえます。withを使ってはいけません。 this オブジェクトのコンストラクタとメソッド、クロージャの作成時にのみ使います。 thisのセマンティクスは扱いが難しく、場合によってその参照先はグローバルオブジェクト（ほとんどはこれです）、呼び出し元のスコープ（eval内）、DOMツリー内のノード（要素に追加されたHTMLイベントハンドラ内）、新しく生成されたオブジェクト（コンストラクタ内）、何か他のオブジェクト（call()またはapply()された関数内）と変化します。 thisは容易に間違いの原因になってしまうので、本当に必要な次の場面だけに使用を限定します。 コンストラクタの中 オブジェクトのメソッドの中（クロージャの作成時を含む） for-in ループ オブジェクト / マップ / ハッシュ内をキーによって走査する場合のみ使えます。 for-inループはしばしば 配列（Array）内の要素をループ処理するという、間違った使い方をされています。for-inループは 0からlength-1までをループするのではなく、オブジェクトとそのプロトタイプチェーンに存在するキーを走査するものです。従ってそのような使い方はエラーを起こしがちです。失敗例をいくつか示します function printArray(arr) { for (var key in arr) { print(arr[key]); } } printArray([0,1,2,3]); // これは動作します。 var a = new Array(10); printArray(a); // これは正しくありません。 a = document.getElementsByTagName( * ); printArray(a); // これは正しくありません。 a = [0,1,2,3]; a.buhu = wine ; printArray(a); // これも正しくありません。 a = new Array; a[3] = 3; printArray(a); // これも正しくありません。 配列のループには必ず通常のfor文を使ってください。 function printArray(arr) { var l = arr.length; for (var i = 0; i l; i++) { print(arr[i]); } } 連想配列 決してArrayをマップ / ハッシュ / 連想配列として使わないでください。 Arrayを連想配列として使うことは許されていません..もっと正確に言えば、数字インデックス以外で配列要素にアクセスすることは許されていません。もしマップやハッシュが必要なのであれば、Arrayの代わりにObjectを使いましょう。実際、連想配列に求められている機能はArrayではなくObjectに実装されており、ArrayはただObjectを拡張しているに過ぎません（その他のJSの全てのオブジェクト、つまり Date、RegExp、Stringなども同様です）。 複数行の文字列リテラル 使わないでください。 このような書き方は禁止です var myString = A rather long string of English text, an error message \ actually that just keeps going and going -- an error \ message to make the Energizer bunny blush (right through \ those Schwarzenegger shades)! Where was I? Oh yes, \ you\ ve got an error and all the extraneous whitespace is \ just gravy. Have a nice day. ; 各行の先頭にある空白はコンパイル時にも安全に取り除かれることはなく、バックスラッシュ（\）の後ろの空白は分かりにくいエラーをもたらします。またこの記法はほとんどのエンジンでサポートされているとはいえ、ECMAScriptの標準ではありません。 代わりに、文字列の結合を使ってください var myString = A rather long string of English text, an error message + actually that just keeps going and going -- an error + message to make the Energizer bunny blush (right through + those Schwarzenegger shades)! Where was I? Oh yes, + you\ ve got an error and all the extraneous whitespace is + just gravy. Have a nice day. ; 配列リテラルとオブジェクトリテラル 使えます。 ArrayとObjectのコンストラクタではなく、配列リテラルとオブジェクトリテラルを使って下さい。 Arrayコンストラクタの引数はエラーの原因になりがちです // 配列の長さは3。 var a1 = new Array(x1, x2, x3); // 配列の長さは2。 var a2 = new Array(x1, x2); // もし x1 が自然数であれば、配列の長さは x1 になります。 // もし x1 が数値でかつ自然数でなければ、例外が発生します。 // それ以外なら、配列は x1 を値とする長さ1の配列になります。 var a3 = new Array(x1); // 配列の長さは0。 var a4 = new Array(); このため、誰かが引数の数を2つから1つに変更すると、その配列の長さは想定と合わなくなる可能性があります。 これらの奇妙な事例は、より可読性の高い配列リテラルを使用することで避けられます var a = [x1, x2, x3]; var a2 = [x1, x2]; var a3 = [x1]; var a4 = []; Objectコストラクタには同じ問題はありませんが、可読性と一貫性の面からオブジェクトリテラルを使うべきです var o = new Object(); var o2 = new Object(); o2.a = 0; o2.b = 1; o2.c = 2; o2[ strange key ] = 3; 上は、こう書かれるべきです var o = {}; var o2 = { a 0, b 1, c 2, strange key 3 }; 組込みオブジェクトのプロトタイプの書き換え しないでください。 Object.prototypeやArray.prototypeのような組込みオブジェクトのプロトタイプを書き換えることは、固く禁じます。同じ組込みであってもFunction.prototypeなどはそれほど危険ではありませんが、それでもデバッグの難しい問題を引き起こす可能性があります。よって書き換えは避けるべきです。 Internet Explorerの条件付きコメント 使わないでください。 これは禁止です var f = function () { /*@cc_on if (@_jscript) { return 2* @*/ 3; /*@ } @*/ }; 条件付きコメントはライタイムのJavaScriptシンタックス・ツリーを改変してしまうので、ツールによる自動化の妨げになります。
https://w.atwiki.jp/a_kurosawa/pages/19.html
◆javascript ◆javascript script type="text/javascript" src="aaaaa.js" /script script type="text/javascript" src="aaaaa.js" /script type="text/javascript"の部分がタイプミスとかしてると、 ちゃんと参照できないよ。(当たり前)
https://w.atwiki.jp/sq4fqq/pages/13.html
javascriptの練習 script type="text/javascript" alert("こんにちは。世界。"); /script script type="text/javascript" !-- document.write("Javascriptの練習：JSで記述"); /script script type="text/javascript" !-- var txt="田中肖像" document.write(txt) /script 実行結果 田中肖像 script type="text/javascript" !-- txt=6; //変数の定義 document.write(txt); //文字を記述する定型分。 /script 実行結果 ６ 関数の呼び出し function txtWrite(){ document.write("出時針"); ｝ script type="text/javascript" !-- txtWrite(); /script 実行結果 出時針 外部ファイル shared/js/にcopy.jsファイルを置く script type="text/javascript" src="shared/js/copy.js" /script if文 script type="text/javascript" !-- var myColor="red";//変数の定義 if(myColor=="red"){ document.write(" font color= red 今日は赤い気分です。 /font "); } else{ document.write("今日は赤い気分じゃないです。"); } /script if文２ 途中で条件が真になると評価(if文)から抜ける。 p script type="text/javascript" !-- var myColor="black";//変数の定義 if(myColor=="red"){ document.write(" font color= red 今日は赤い気分です。 /font "); } else if(myColor=="blue"){ document.write(" font color= blue 今日は青い気分です。 /font "); } else if(myColor=="green"){ document.write(" font color= green 今日は緑な気分です。 /font "); } else if(myColor=="yellow"){ document.write(" font color= yellow 今日は黄色な気分です。 /font "); } else if(myColor=="purple"){ document.write(" font color= purple 今日は黄色な気分です。 /font "); } else { document.write("今日はよくわからない気分です。"); } /script 実行結果 今日はよくわからない気分です。 if文３ すべての条件式を評価させたい場合 p script type="text/javascript" !-- var myColor="black"; if(myColor !=="red"){ document.write(" font color= red 今日は赤い気分じゃない /font br "); } if(myColor !=="blue"){ document.write(" font color= blue 今日は青い気分じゃない /font br "); } if(myColor !=="green"){ document.write(" font color= green 今日は緑な気分じゃない /font br "); } if(myColor !=="black"){ document.write(" font color= black 今日は黒い気分じゃない /font br "); } if(myColor !=="yellow"){ document.write(" font color= yellow 今日は黄色い気分じゃない /font br "); } if(myColor !=="purple"){ document.write(" font color= purple 今日は紫な気分じゃない /font br "); } /script 実行結果 今日は赤い気分じゃない 今日は青い気分じゃない 今日は緑な気分じゃない 今日は黄色い気分じゃない 今日は紫な気分じゃない h3 for文 /h3 h4 繰り返しの処理 /h4 /p script type="text/javascript" !-- var myWord="Hello! JavaScript!!";//変数の定義 for(i=1;i =7;i++){ document.write(" font size= " + i +" "+ myWord + " /font br "); } /script 実行結果 徐々に大きくなる。 Hello! JavaScript!! Hello! JavaScript!! Hello! JavaScript!! Hello! JavaScript!! Hello! JavaScript!! Hello! JavaScript!!